<script setup lang="ts">
import { reactive, ref } from 'vue';

interface Props {
  weekList: any[];
}

defineProps<Props>();

const formRef = ref();
const state = reactive({
  ruleForm: {
    id: '',
    name: '',
    classHours: null as number,
    weekDay: null as number,
    startTime: null as number,
    endTime: null as number
  },
  rules: {
    name: {
      required: true, message: '请输入课程名称', trigger: ['blur']
    },
    classHours: {
      required: true, type: 'number', message: '请输入课时', trigger: ['blur']
    },
    weekDay: {
      required: true, type: 'number', message: '请选择星期', trigger: ['change']
    },
    startTime: {
      required: true, type: 'number', message: '请选择开始时间', trigger: ['change']
    },
    endTime: {
      required: true, type: 'number', message: '请选择结束时间', trigger: ['change']
    }
  },
  source: {} as FileSource,
});
defineExpose({
  state,
  formRef
});
</script>

<template>
  <n-form ref="formRef" :model="state.ruleForm" :rules="state.rules" label-placement="left" label-width="100" require-mark-placement="left">
    <n-grid responsive="screen" item-responsive>
      <n-form-item-gi span="24" label="课程名称" path="name">
        <n-input v-model:value="state.ruleForm.name" placeholder="请输入课程名称" clearable></n-input>
      </n-form-item-gi>
      <n-form-item-gi span="24" label="课时" path="classHours">
        <n-input-number class="w-100%" :min="0" v-model:value="state.ruleForm.classHours" placeholder="请输入课时" clearable></n-input-number>
      </n-form-item-gi>
      <n-form-item-gi span="24" label="星期" path="weekDay">
        <n-select v-model:value="state.ruleForm.weekDay" :options="weekList" placeholder="请选择星期" clearable></n-select>
      </n-form-item-gi>
      <n-form-item-gi span="24" label="开始时间" path="startTime">
        <n-time-picker class="w-100%" v-model:value="state.ruleForm.startTime" placeholder="请选择开始时间" format="HH:mm" clearable></n-time-picker>
      </n-form-item-gi>
      <n-form-item-gi span="24" label="结束时间" path="endTime">
        <n-time-picker class="w-100%" v-model:value="state.ruleForm.endTime" placeholder="请选择结束时间" format="HH:mm" clearable></n-time-picker>
      </n-form-item-gi>
    </n-grid>
  </n-form>
</template>

<style scoped>

</style>
